import { defineComponent, ref, reactive, onMounted } from 'vue';
import { FreeMove, FreeWindow as Window } from '@/../packages';
import styles from './index.module.less';

export default defineComponent({
    setup() {
        const state = reactive({
            flag: false,
            height: 100,
            width: 100,
        });

        return () => (<div class={styles.container}>
            <div class={styles.left}>
                <div class={styles.controller}>
                    <div class={styles['flex-y-center']}>
                        <input type="radio" v-model={state.flag} value={true} />
                        <label>fixed</label>
                    </div>
                    <div class={styles['flex-y-center']}>
                        <input type="radio" v-model={state.flag} value={false} />
                        <label>absolute 盒子内（父盒子必须设置 relative）</label>
                    </div>
                </div>
            </div>
            <div class={styles.right}>
                {!state.flag && <FreeMove fixed={false} height={state.height} width={state.width}  />}
            </div>
            {state.flag && <FreeMove fixed={true}/>}
        </div>)
    },

})